<template>
	<!-- 添加部门 -->
	<view>
		<view class="toptext">
			<text class="text">{{title}}</text>
		</view>
		<view class="boximg">
			<text>设置部门Logo</text>
			<button class="btn" @click="btnimg"></button>
			<image :src="src"></image>
		</view>
		<view class="boxtext">
			<text>部门名称</text>
			<input class="text" placeholder="请输入部门名称" type="text" v-model="dptname">
		</view>
		<view class="boxtel">
			<text>部门负责人</text>
			<select v-model="select">
				<option disabled value="">请选择部门负责人</option>
				<option v-for="dept in options" :key="dept.empid" :value="dept.empid">{{dept.empname}}</option>
			</select>
		</view>
		<view>
			<button @click="updata">保存</button>
		</view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				src:"http://localhost:3000/static/logoimg/添加部门.png",
				title:'添加部门',list:'',options:'',select:'',dptname:'',
			}
		},
		onLoad() {
			this.getdata();
		},
		methods: {
			async getdata(){
				var emid = this.dptemid;
				const res = await this.Request({
					url:'/api/employee/getallname',
					method:'POST'
				})
				this.options = res.data
			},
			async btnimg(){
				console.log("a")
				const res = await this.Upload({
					url:'api/upload/postimage1'
				});
				this.src=  res.data.slice(8,81)
			},
			async updata(){
				if(this.dptname.replace(/\s*/g,"").length == 0 ||
				   this.select == ''){
					uni.showToast({
						icon:"error",
						title:'内容不可为空'
					})
				} else {
					const res = await this.Request({
						url:'api/department/dptadd',
						method:'POST',
						data:{dptname:this.dptname,dptimg:this.src,dptemid:this.select}
					})
					if(res.data.affectedRows=1){
						uni.showToast({
							title: '添加成功'
						})
						setTimeout(() => {
							uni.reLaunch({
								url:'/pages/super/superpage/dptment'
							})
						},500)
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	text{
		font-family: 'Courier New';
		font-size: 130%;
		font-weight: 800;
		margin:auto 0;
		margin-left: 5px;
	}
	input{
		margin:auto 0;
	}
	.toptext{
		width: 100%;
		background-color: #efefef;
		display: flex;
		border-bottom: 1px solid #ccc;
		.text{
			margin: 5px 0 5px 5px;
			font-size: 110%;
			font-weight: 700;
			color: #d3d3d3;
		}
	}
	.boximg{
		height: 80px;
		width: 80px;
		display: flex;
		position: relative;
		.btn{
			height: 70px;
			width: 70px;
			position: absolute;
			margin-top: 5px;
			margin-left: 140px;
			z-index: 5;
			opacity: 0;
		}
		image{
			position: absolute;
			margin: 5px 0 5px 140px;
			height: 70px;
			width: 70px;
			/* 背景图片置于最低层 */
			z-index: 3;
		}
	}
	.boxtext{
		height: 50px;
		display: flex;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		.text{
			margin-left: 70px;
			color: #d3d3d3;
		}
	}
	.boxtel{
		height: 50px;
		display: flex;
		border-bottom: 1px solid #ccc;
		select{
			margin:5px 0 5px 50px;
			border-radius: 10px;
		}
		.text{
			margin-left: 55px;
			font-size: 110%;
			font-weight: 700;
			color: #d3d3d3;
			}
	}
	.boxbom{
		height: 50px;
		display: flex;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		.text{
			margin-left: 70px;
			color: #d3d3d3;
		}
	}
</style>

